<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>知识点分析比对</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui-v2.5.6/layui/css/layui.css" media="all">
    <script src="layui-v2.5.6/layui/layui.js" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css"/>
    <script src="bootstrap/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="bootstrap/popper.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="bootstrap/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="vue/axios.js"></script>
    <script src="vue/Vue.js"></script>
    <script src="js/echarts.js"></script>
</head>
<body>


<div id="app" class="container" style="margin-top: 50px">
    <table class="table table-striped text-center table-hover table-bordered text" id="table">
        <thead>
        <tr class="text-info" style="font-size: 12px;">
            <th>学校</th>
            <th>届</th>
            <th>学科</th>
            <th>知识点</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody class="text-muted" style="font-size: 12px;" >
        <tr >
            <td>
                <div class="layui-form">
                    <select name="school" style="width: 190px;height:38px" lay-filter="school_type" >
                        <option value="" >请选择学校</option>
                        <option :value="school.sname" v-for="school in schools.data">{{school.sname}}</option>
                    </select>
                </div>
            </td>
            <td>
                <div class="layui-form">
                    <select name="semester" style="width: 190px;height:38px" lay-filter="semester_type">
                        <option value="">请选择届</option>
                        <option :value="semester.beginyear" v-for="semester in semesters.data">{{semester.beginyear}}</option>
                    </select>
                </div>
            </td>
            <td>
                <div class="layui-form">
                    <select name="subject"  style="width: 190px;height:38px" lay-filter="subject_type" >
                        <option value="">请选择届</option>
                        <option :value="subject" v-for="subject in subjects.data">{{subject}}</option>
                    </select>
                </div>
            </td>
            <td>
                <div class="layui-form">
                <div class="layui-form-item">
                    <select name="knowledges" style="width: 190px;height:38px" id="knowledges" lay-filter="knowledges_type" >
                        <option value="">请选择对应的知识点</option>
                    </select>
                </div>
                </div>
            </td>
            <td>
                <button class="btn btn-info btn-sm" >查看</button>
            </td>
        </tr>
        </tbody>
    </table>

    <div id="main" style="width: 600px;height:400px;">11</div>

</div>

<script type="text/javascript">
    new Vue({
        el:"#app"
        ,data:{
            schools:[],
            semesters:[],
            subjects:[],
        }
        ,mounted(){
            axios
                .get("/classdeans/analyze/semesterAll")
                .then(res=>{
                    this.semesters = res.data;
                });
            axios
                .get("/classdeans/analyze/subjectAll")
                .then(res=>{
                    this.subjects = res.data;
                });
            axios
                .get("/classdeans/analyze/schoolAll")
                .then(res=>{
                    this.schools = res.data;
                });
            axios
                .get("/classdeans/analyze/All")
                .then(res=>{
                    console.info(res.data.data)
                    var x = [];
                    var heavynumber = [];
                    var regularnumber = [];
                    var specialtynumber = [];
                    var ontPassnumber = [];
                    for(var i = 0 ; i < res.data.data.length ; i++){
                        x[i] = res.data.data[i].grade;
                        heavynumber[i] = res.data.data[i].heavynumber;
                        regularnumber[i] = res.data.data[i].regularnumber;
                        specialtynumber[i] = res.data.data[i].specialtynumber;
                        ontPassnumber[i] = res.data.data[i].ontPassnumber;

                    }
                    //console.info(x)
                    var myChart = echarts.init(document.getElementById('main'));
                    var posList = [
                        'left', 'right', 'top', 'bottom',
                        'inside',
                        'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
                        'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
                    ];

                    app.configParameters = {
                        rotate: {
                            min: -90,
                            max: 90
                        },
                        align: {
                            options: {
                                left: 'left',
                                center: 'center',
                                right: 'right'
                            }
                        },
                        verticalAlign: {
                            options: {
                                top: 'top',
                                middle: 'middle',
                                bottom: 'bottom'
                            }
                        },
                        position: {
                            options: echarts.util.reduce(posList, function (map, pos) {
                                map[pos] = pos;
                                return map;
                            }, {})
                        },
                        distance: {
                            min: 0,
                            max: 100
                        }
                    };

                    app.config = {
                        rotate: 90,
                        align: 'left',
                        verticalAlign: 'middle',
                        position: 'insideBottom',
                        distance: 15,
                        onChange: function () {
                            var labelOption = {
                                normal: {
                                    rotate: app.config.rotate,
                                    align: app.config.align,
                                    verticalAlign: app.config.verticalAlign,
                                    position: app.config.position,
                                    distance: app.config.distance
                                }
                            };
                            myChart.setOption({
                                series: [{
                                    label: labelOption
                                }, {
                                    label: labelOption
                                }, {
                                    label: labelOption
                                }, {
                                    label: labelOption
                                }]
                            });
                        }
                    };


                    var labelOption = {
                        show: true,
                        position: app.config.position,
                        distance: app.config.distance,
                        align: app.config.align,
                        verticalAlign: app.config.verticalAlign,
                        rotate: app.config.rotate,
                        formatter: '{c}  {name|{a}}',
                        fontSize: 16,
                        rich: {
                            name: {
                                textBorderColor: '#fff'
                            }
                        }
                    };

                    option = {
                        color: ['#003366', '#006699', '#4cabce', '#e5323e'],
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        legend: {
                            data: ['重本率', '本科率', '专科率', '升学失败']
                        },
                        toolbox: {
                            show: true,
                            orient: 'vertical',
                            left: 'right',
                            top: 'center',
                            feature: {
                                mark: {show: true},
                                dataView: {show: true, readOnly: false},
                                magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                                restore: {show: true},
                                saveAsImage: {show: true}
                            }
                        },
                        xAxis: [
                            {
                                type: 'category',
                                axisTick: {show: false},
                                data: x,
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: '重本',
                                type: 'bar',
                                barGap: 0,
                                label: labelOption,
                                data: heavynumber,
                            },
                            {
                                name: '本科',
                                type: 'bar',
                                label: labelOption,
                                data: regularnumber,
                            },
                            {
                                name: '专科',
                                type: 'bar',
                                label: labelOption,
                                data: specialtynumber,
                            },
                            {
                                name: '未通过',
                                type: 'bar',
                                label: labelOption,
                                data: ontPassnumber,
                            }
                        ]
                    };
                    myChart.setOption(option);
                })
        }
        //一但（dom）数据变动，就会触发该机制
        ,updated:function () {
            layui.use('form', function(){

                var form = layui.form;
                form.on('select(subject_type)',function(data){
                    var subject = data.value;
                    if (subject == "")
                    {
                        subject = null;
                    }
                    $.ajax({
                        url:'/classdeans/analyze/knowledgeAll/'+subject
                        ,type:'get'
                        ,dataType:'json'
                        ,success:function (data) {
                            if(data.code != 200){
                                alert("所属科目下没有知识点")
                            }
                            $("#knowledges").empty();
                            for (var i = 0 ; i < data.data.length; i++){
                                var item = data.data[i];
                                $("#knowledges").append("<option value="+item.kpId+" id='knowledge' >"+item.kdname+"</option>");
                            }
                            form.render("select");
                        }
                    });

                });
                form.on('select(school_type)',function(data){
                    console.info(data);
                });
                form.on('select(semester_type)',function(data){
                    console.info(data);
                });
                form.on('select(knowledges_type)',function (data) {
                    console.info(data)
                })
                form.render();

            });
        }
    });


</script>
</body>

</html>